

@color_1:#ec6124;
@color_2:#f4c022;
body {
    background: #eee;
    font-family: "Æ»·½";
    font-size: 14px;
    color: #898989;
    padding: 0;
    max-width: 640px;
    padding-bottom: 14%;
    position:relative;
    margin: 0 auto;
}


.iconfont{
    font-size: 42px;


}

.color{
    color:@color_1 !important;
}

.swiper-container {
    width: 100%;
    height: 100%;
}

.swiper-slide {
    text-align: center;
    font-size: 18px;
    background: #fff;
    display: -webkit-box;
    display: -ms-flexbox;
    display: -webkit-flex;
    display: flex;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    -webkit-justify-content: center;
    justify-content: center;
    -webkit-box-align: center;
    -ms-flex-align: center;
    -webkit-align-items: center;
    align-items: center;
}
.click_share{
    height:100%;
    width:100%;
     position:absolute;
     top:0px;
     left:0px;
     z-index: 9;
         background: rgba(0, 0, 0, 0.5);
     img{
        position:fixed;
     }
}
.Ta{
  position: fixed;
    bottom:67px;
    width:100%;
    max-width:640px;
    height:79px;
    background: rgba(0, 0, 0, 0.5);
    display:table;
  div{
    width:50%;
    display:inline-block;

display:table-cell;
vertical-align: middle;
text-align: center;
button{

    background:none;
    border-radius:0px;
    font-size: 25px;
  color:#fff;
  i{

    padding:18px;
 
    margin-right: 2%;
  }
  .i_1{
        background:url('../images/head.png') no-repeat center center;
           background-size: contain;   
  }
    .i_2{
        background:url('../images/share.png') no-repeat center center;
           background-size: contain;   
  }
}

      &:nth-of-type(1){
        button{
                padding:15px 20%;
                    background:@color_1;
        }



  }
    &:nth-of-type(2){
        button{
                 border: 2px solid @color_1 ;
                 padding:15px 20% 15px 20%; 
        }



  }
}

}
.player_img{
    background:@color_2;
        padding: 2% 3%;
        p{
            margin-bottom: 2%;
        }
}
.player_info{
    background:#fff;
    padding:2% 2%;
    margin:0px;

    .img{
         padding: 0px;
        margin-right: 2%;
        margin-top: 3%;
        border-radius: 100px;
        overflow: hidden;
        img{
            width: auto;
            height: auto;
        }
    }
    .text{
        padding:0px;
        margin-top: 3%;
        position:relative;
        .num{
            position:absolute;
            right:10px;
            top:1px;
            font-size: 25px;
            color:@color_1;
            line-height: 100%;
        }
    }
    h3{
        margin:0px;
        margin-bottom: 1%;
        font-size: 30px;
    }
    p{
        font-size: 20px;
    }
}
 .img-rounded{
    border-radius: 100px;
 }
.explain_main{
    padding:0px 3%;
}
.explain_spoll,.explain_flow,.thanks{
    margin-bottom:6%;
    h3{
        font-size: 20px;
        color:#303030;
    }
    p{
margin-bottom: 5px;
        line-height: 24px;
        font-size: 20px;
    }
}
.bt{
    button{
        width:100%;
        margin-bottom: 2%;
        padding:10px;
        cursor:pointer;


        &:nth-of-type(1){
            background:#ec6124;
                    color:#fefefe;
        }
         &:nth-of-type(2){
        background:#fff;
                color:#898989;
        }
    }
}


.line_info_title{
font-size: 20px;
border-top: 1px solid #eee;

padding:2% 0;

    margin:0px;

ul{
    margin:0px;
    li{
        width:17%;
        text-align: center;
    }
}
}
.line_info_people{
    font-size: 20px;


        margin:0px;

 ul{
    padding: 2% 0;
    margin:0px;
    border-top: 1px solid #eee;
    &:hover{
        background:@color_1;
        color:#fefefe;
    }
    li{
position:relative;
        width:17%;
        text-align: center;
    }
}
}

.messages{
   
    textarea{
        border:0px;
        background:#fff;
        width:100%;
        resize: none;
        height:70px;
        margin-bottom: 1%;
        overflow: hidden;
        padding: 16px 20px;
        display: table-cell;
        vertical-align: middle;
    }
    margin-top: 2%;
    .area{
        text-indent: 10px;
        text-align: left;
        font-size: 18px;
        color:@color_1;   
    }
}

    .line_title,.apply_title,.explain_title,.explain_title{
        height:50px;
        line-height: 50px;
        font-size: 25px;
        text-align: center;
    }

    form{
        
        input{
            width:100%;
            height:60px;
            margin:5px 0;
            border:none;
            background:#fff;
            font-size: 18px;
            text-indent: 10px;
        }
    }
    .phone_tip{
        font-size: 14px;
        padding-top: 4px;
        color:@color_1;
        text-align: left;
        margin:0px;
        text-indent: 10px;
        padding-bottom: 2%;
    }
    .upload{

        .upload-hide{
            display: none;
        }
        .col-xs-3{
            padding:0px;
            position:relative;
            form{
                width: 100%;
                #dd{
                    @media(max-width:410px){
                        height:60px;
                        width:60px;
                    }
                    @media(min-width:410px) and (max-width:440px){
                        height:75px;
                        width:75px;
                    }
                    @media(min-width:440px){
                        height:90px;
                        width:90px;
                    }
                    border:1px solid  #ddd;
                    margin:0 auto;
                    position:relative;
                    overflow: hidden;
                    .line_1{
                        width:70%;
                        height:2px;
                        position:absolute;
                        background:#ddd;
                        display:inline-block;
                        top:50%;
                        left:50%;
                        transform:translate(-50%,-50%);
                        z-index: 1;
                    }
                    .line_2{
                        width:2px;
                        height:70%;
                        position:absolute;
                        background:#ddd;
                        display:inline-block;
                        top:50%;
                        position:absolute;
                        left:50%;
                        z-index: 1;
                        transform:translate(-50%,-50%);
                    }
                    img{
                        width: 100%;
                        height: 100%;
                        z-index: 2;
                        position: relative;
                    }
                }
            }
            .btn_upload{
                opacity: 0;
                height: 100%;
                margin: 0;
                position: absolute;
                z-index: 3;
            }
        }
        background:#fff;
        padding:10px;
        .upload_tip{
            font-size: 14px;
            text-align: left;
        }
        .upload_img{
            .row{
                padding:0% 4%;
            }
            .margin_top{
                margin-top: 2%;
            }
        }
    }






.apply_vote {
    height: 82px;
    text-align: center;
    background: @color_1;
    padding: 8px 0;
    .row {
        margin: 0;
        padding: 0;
        .apply {
            border-right: 2px solid #fefefe;
        }
    }
    p {
        padding: 4px 0;
        margin: 0px;
        font-size: 18px;
        color: #fefefe;
    }
}

.main {
    background: @color_2;
    padding: 20px;

}
.footer{
    z-index: 99;
    .row{
        margin:0px;
    }
    .col-xs-3{
        padding:0px;
    }
    span{
        display:block;
    }
    a{
    color:#303030;
    text-decoration:none;
    color:#888;
}

    position:fixed;
    bottom:0px;
    height:auto;
    background:#e7e7e7;
    padding:4px 0;
    width:100%;
    border-top:1px solid #ddd;
   img{
    max-width: 60%;
   }
   p{
    margin:0px;
    font-size: 16px;
    line-height: 100%;
   }
}
.grid_people{
    .col-xs-6{
        padding:0 12px 0 12px;
    }
    .thumbnail{
        position:relative;
        a{
            display: inline-block;
            overflow: hidden;
            img{
                width: auto;
                height: auto;
                
            }
        }
    }
    .num{
      padding:2% 10%;
        background:@color_1;
        line-height: 30px;
        position:absolute;
        top:0px;
        left:0px;
        color:#fefefe;
        text-align: center;
        font-size: 18px;
    }
    .caption{
        background:@color_1;
        position: relative;
        .circle{
            position:absolute;
        top:50%;
    transform: translateY(-50%);
            right:4%;
            display:inline-block;
            height:50px;
            width:50px;
            background:@color_2;
            border-radius: 50px;
padding:2px 0;
line-height: 14px;
            p{
                text-align: center;
            }
        }
        p{
         margin:0px;
         padding:4px 0; 
         color:#fefefe;
         font-size: 16px;
        }
    }
}
.grid_match {
    .breadcrumb {
        text-align: center;
        li {
            a {
                text-decoration: none;
                color: #fefefe;
                &:hover {
                    color: @color_1
                }
            }
            font-size: 18px;
            +li:before {
                padding: 0 15px;
                color: #fff;
                content: "/\00a0";
            }
        }
    }
}

.active_time {
    text-align: center;
    color: #fefefe;
    padding: 5px 0;
    font-size: 14;
}

.search {
  margin:0 auto;
  width:80%;
    span,input {
        border: 1px solid @color_1;
    }
    input {

             height: 40px;
        font-size: 14px;
    }
    span {
        background: @color_1;
        color: #fefefe;
    }
}
@media(min-width:640px){


    .footer{
        width:640px;

    }
}
@media(max-width:460px) {
    .Ta{

    bottom:53.5px;


    height:62px;

  div{
        &:nth-of-type(2){
        button{
                 padding:10px 10% 10px 10%; 
        }



  }
        &:nth-of-type(1){
        button{
                 padding:12px 10% 12px 10%; 
        }  



  }
    button{
        font-size: 18px;
        i{
            padding:12px;
        }
    }
  }
}
    .player_info{
    .num{
        font-size: 18px !important;
    }
    h3{
        font-size: 18px;
    }
p{
        font-size: 14px;
    }
}
        .explain_spoll,.explain_flow,.thanks{
    h3{
        font-size: 15px;
    }
    p{
        font-size: 15px;
    }
}
   .line_info_people,.line_info_title{
font-size: 16px;
}

    .messages{
   
    .area{

           font-size: 15px;

    }
}
    form{
            .upload{
                 .col-xs-3{
        padding:0px;
        p{
            height:70px;
            max-width:70px;
        }
    }
    .upload_tip{
        font-size: 15px;

    }
    .upload_img{
        .row{
            // padding:0px 3%;
        }
    }
}

    }



    form{
    text-align: center;
    input{
            height:50px;
            margin:5px 0;
            font-size: 15px;
    }
.phone_tip{
      font-size: 15px;
}
}

    .line_title,.apply_title,.explain_title{

font-size: 20px;

}
.iconfont{
    font-size: 32px;


}
    .footer{
        p{
            font-size: 14px;
        }
    }
    .grid_people{
    .col-xs-6{
        padding:0 8px 0 8px;
    }
        .num{
      padding:1% 8%;
      font-size: 16px;
  }
    .caption{
          .circle{
padding:3px 0;
            height:45px;
            width:45px;
            border-radius: 45px;
            p{
                line-height: 16px;

            }
        }
        p{
         padding:2px 0; 
         font-size: 14px;
        }
    }
}
    .active_time {
    font-size: 12px;
}
    .grid_match {
    .breadcrumb {
        padding:4px;
        li {
            font-size: 16px;
            +li:before {
                padding: 0 10px;
            }
        }
    }
}
    .search {
        input {
            height: 35px;

            font-size: 13px;
            text-indent: 10px;
        }
     
    }
    .apply_vote {
        height: 70px;
        padding: 7px 0;
        .row {
            margin: 0;
            padding: 0;
        }
        p {
            padding: 2px 0;
            font-size: 16px;
            color: #fefefe;
        }
    }
}




@media(max-width:360px) {
        .Ta{

    bottom:51.5px;


    height:55px;

  div{
        &:nth-of-type(2){
        button{
                 padding:9px 8% 9px 8%; 
        }
}
   &:nth-of-type(1){
        button{
                 padding:10px 8% 10px 8%; 
        }  



  }
    button{

        font-size: 14px;
        i{
            padding:9px;

        }
    }
  }
}
        .player_info{

    h3{
        font-size: 16px;
    }
    .num{
        font-size: 16px !important
    }
    p{
        font-size: 13px;
    }
}
            .explain_spoll,.explain_flow,.thanks{
    h3{
        font-size: 13px;
    }
    p{
        font-size: 13px;
    }
}

        .line_info_people,.line_info_title{
font-size: 14px;
}

        .messages{
   
    .area{

           font-size: 13px;

    }
}
        form{
            .upload{
                 .col-xs-3{
        padding:0px;
        p{
            height:60px;
            max-width:60px;

        }
    }
    .upload_tip{
        font-size: 13px;

    }
    .upload_img{
        .row{
            // padding:0px 3%;
        }
    }
}

    }

        .line_title,.apply_title,.explain_title{

font-size: 18px;

}
        form{
    text-align: center;
    input{
            height:45px;
            margin:5px 0;
            font-size: 13px;
    }
.phone_tip{
      font-size: 13px;
}
}
.iconfont{
    font-size: 30px;


}
        .footer{
        p{
            font-size: 13px;
        }
    }
        .grid_people{
                  .num{
      padding:1% 8%;
      font-size: 14px;
  }
    .col-xs-6{
        padding:0 4px 0 4px;
    }
    .caption{
           .circle{
            padding: 4px 0;
                height: 40px;
    width: 40px;
    border-radius: 40px;
            p{
                line-height: 16px;
            }
        }
        p{
         padding: 0; 
         font-size: 12px;
        }
    }
}
        .grid_match {
    .breadcrumb {
        li {
            font-size: 14px;
            +li:before {
                padding: 0 6px;
            }
        }
    }
}
    .apply_vote {
        height: 59px;
        padding: 8px 0;
        .row {
            margin: 0;
            padding: 0;
        }
        p {
            padding: 1px 0;
            font-size: 14px;
            color: #fefefe;
        }
    }
}
